<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="Convert_Pinyin.js"></script>
<title></title>
</head>


<body>
	<div id="app">
		<el-cascader
		    v-model="value"
		    :options="options"
		    @change="handleChange"></el-cascader>
		<el-button @click='show'>点击我</el-button>
	</div>
	<script>
		function compare(a,b){
					//只比较前三位首字母排序
					if(a.pinyinCode[0]-b.pinyinCode[0]){
						return a.pinyinCode[0]-b.pinyinCode[0];
					}else if(a.pinyinCode[1]-b.pinyinCode[1]){
						return a.pinyinCode[1]-b.pinyinCode[1]
					}else{
						return a.pinyinCode[2]-b.pinyinCode[2]
					}
				}
				
				function compareAll(arr){
					//递归对所有树子节点排序
					arr.sort((a,b)=>compare(a,b))
					arr.forEach(o=>o.children ? compareAll(o.children):null)
				}
				
				function dealData(arr){
					//处理成级联菜单的data数据
					arr.forEach(o=>{
						delete o.level      //删除code属性
						delete o.code		//删除level属性
						o.value=o.label     //复制lebel到value中
						o.pinyin=pinyin.getCamelChars(o.label)//转拼音
						o.label=o.pinyin[0]+" "+o.label//加入首字母
						o.pinyinCode=o.pinyin.split('').map(x=>x.charCodeAt())//首字母转ASCII码，用作排序
						o.children ? dealData(o.children):null
					})
				}
		
		
		
		new Vue({
			el:'#app',
			data:{
				options:[],
				value:''
			},
			methods:{
				handleChange(val){
					this.Value=val;
				},
				show(){
					console.log(this.value);
					
				}
				
			},
			mounted() {
				axios.get('./cityData.P.json').then((response)=>{
					let cityData=response.data;
					// cityData.forEach(o=>o.value=o.label);
					dealData(cityData);
					compareAll(cityData);
					// this.options=response.data;
					this.options=cityData;
					console.log(response.data)
				}).catch(function(err){
					console.log(err);
				})
			}
	
		})
	</script>
</body>
</html>
